      >
<template>
  <div id="app">
    <div>
      <span>图书名称:</span>
      <input v-model.trim="bookname" type="text" />
    </div>
    <div>
      <button  @click="add" :disabled="bool" >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>图书名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <Library
        :getBook="getBook"
        :lists="list"
        :list="item"
        v-for="item in list"
        @compile="compile"
        :key="item.id" />
      </table>
    </div>

  </div>
</template>
<script>
import Library from './components/library'

import axios from 'axios'
axios.defaults.baseURL = 'http://liufusong.top:4000/'
export default {
  data () {
    return {
      list: [],
      bookname: '',
      bool: false
    }
  },
  components: {
    Library
  },
  created () {
    this.getBook()
  },
  methods: {
    async  getBook () {
      try {
        const res = await axios({
          url: '/books'
        })
        // console.log(res.data)
        this.list = res.data
      } catch (err) {
        console.log(err)
      }
    },
    async add () {
      if (this.bookname === '') {
        return alert('请输入图书名')
      } else {
        const res = await axios({
          url: 'books/book/' + this.bookname
        })
        console.log(res.data)
        if (res.data.status === 1) {
          this.bool = true
          this.bool = false
        } else {
          try {
            await axios({
              url: '/books',
              method: 'post',
              data: { name: this.bookname }
            })
            this.getBook()
            this.bookname = ''
          } catch (err) {
            console.log(err)
          }
        }
      }
    },
    async compile (e, e1) {
      // console.log(e)
      this.bookname = e
      const res = await axios({
        url: '/books/' + e1
      })
      console.log(res.data.name)
    }
  }
}
</script>
